$(function () {
  // 初始化右侧滚动条
  // 这个方法定义在scroll.js中
  resetui();

  // TODO: 实现发送聊天信息并且渲染到页面
  // 请求URL地址：http://ajax.frontend.itheima.net:3006/api/robot
  // 参考步骤：
  // 1. 下载好素材，找到对应页面
  //    - index.html 是入口页面
  //    - chat.js 是同学们代码编写区域
  // 2. 找到发送按钮，注册点击事件
  // 3. 点击事件处理函数里面判断用户输入内容合法性
  // 4. 获取到聊天区域的对应的ul容器，调用 append() 方法来追加li
  //    - 注意：追加的 li 我们需要设置类名叫 right_word
  // 5. 清除文本框的值，并且调用 resetui() 来让聊天框区域自动滚动到底部
  // 6. 定义函数 getMsg() 接收用户发送的信息参数
  // 7. 利用 $.ajax() 发送 GET 请求，请求的参数是 spoken: 用户输入的内容
  // 8. 在 success 成功回调中，获取返回数据，判断是否请求成功，如果成功，把返回的数据渲染到聊天区域
  $("#btns").on("click", function () {
    let texts = $("#ipt").val().trim();
    if (texts.length <= 0) return $("#ipt").val("");
    $("#talk_list").append(
      '<li class="right_word"><img src="img/person02.png" /> <span>' +
        texts +
        "</span></li>"
    );
    $("#ipt").val("");
    resetui();
    getmsg(texts);
  });

  function getmsg(texts) {
    $.ajax({
      method: "GET",
      url: "http://www.liulongbin.top:3006/api/robot",
      data: {
        spoken: texts,
      },
      success: (res) => {
        console.log(res);
        if (res.message === "success") {
          let msg = res.data.info.text;
          $("#talk_list").append(
            '<li class="left_word"><img src="img/person01.png" /> <span>' +
              msg +
              "</span></li>"
          );
          resetui();
          getVoice(msg);
        }
      },
    });
  }

  function getVoice(text) {
    $.ajax({
      method: "GET",
      url: "http://www.liulongbin.top:3006/api/synthesize",
      data: {
        text: text,
      },
      success: (res) => {
        if (res.status === 200) {
          $("#voice").prop("src", res.voiceUrl);
        }
      },
    });
  }


  $('#ipt').on('keyup',function(e) {
      if (e.keyCode === 13) {
          $('#btns').click()
      }
  })
});
